<template>
  <div class="pageBox">
    <head-component title="金豆兑换"></head-component>
    <div class="price flex-row">今日票价：{{ params.piaoPrice }}</div>
    <div class="content">
      <div class="main">
        <div class="mainLine"></div>
        <div class="title">兑换数量</div>
        <div class="numberBox flex-between">
          <div class="numberRight flex-row">
            <div class="monIcon">¥</div>
            <input
              class="ipt"
              type="text"
              placeholder="输入数量"
              v-model="form.amount"
            />
          </div>
          <button class="all" @click="form.amount = params.money * params.rate" >全部</button>
        </div>
        <div class="useable">可兑换：{{ Math.floor(Number(params.money) / Number(params.piaoPrice)) }}</div>

        <div class="iptBox">
          <p>姓名</p>
          <input type="text" placeholder="请输入姓名" v-model="form.name" />
        </div>

        <div class="iptBox">
          <p>兑换账号</p>
          <input
            type="text"
            placeholder="请输入您的交易所账号"
            v-model="form.account"
          />
        </div>

        <div class="agreement flex-center">
          <van-checkbox v-model="checked">
            我已认真阅读并同意
            <template #icon="props">
              <img
                class="img-icon"
                :src="props.checked ? activeIcon : inactiveIcon"
              />
            </template>
          </van-checkbox>
          <div class="agree" @click="show = true">《兑换协议》</div>
        </div>

        <button class="exchangeBtn" @click="onSubmit" >立即兑换</button>
      </div>
    </div>

    <van-popup v-model:show="show" round>
      <div class="popupBox">
        <div class="popupTitle flex-center">兑换协议</div>
        <div class="popupCon" v-html="con">
        </div>
        <button class="popupBtn" @click="onKnow">知道了</button>
      </div>
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
import { Toast } from "vant";
import { defineComponent, reactive, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import { post } from "../../untils/request";
import router from "@/router";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    // 兑换参数
    const params = ref({
      piaoPrice: "0.00",
      rate: 0,
      money: "0.00",
    });

    const form = reactive({
      // 兑换金额
      amount: "",
      // 姓名
      name: "",
      // 兑换账号
      account: "",
    });

    const activeIcon = require("../../image/login/gouxuan_btn.png");
    const inactiveIcon = require("../../image/login/gouxuan_btn2.png");
    const checked = ref(true);

    const show = ref(false);

    const con = ref(null);

    function onKnow() {
      show.value = false;
      checked.value = true;
    }

    /**
     * 获取兑换参数
     */
    function getParams() {
      post("/portal", {
        module: "Finance",
        interface: "7000",
      }).then((res) => {
        // console.log(res);
        params.value = res.data;
      });
    }

    // 表单校验
    function checkForm() {
      if (!form.name) {
        return "请输入姓名";
      }
      if (!form.account) {
        return "请输入兑换账号";
      }
      if (!form.amount) {
        return "请输入兑换数量";
      }
      if (Number(form.amount) > params.value.money) {
        return "兑换数量不能大于可兑换金额";
      }
      return "";
    }

    function onSubmit(){
      // 验证表单
      if(checkForm()){
        Toast(checkForm());
        return;
      }
      // 提交表单
      post("/portal",{
        module: "Finance",
        interface: "7001",
        data: form,
      }).then(() => {
        Toast({
          message: "提交成功",
          duration: 800,
          onClose: router.back,
        });
      })
    }

    // 获取兑换参数
    getParams();

    function getCon() {
       post("/portal",{
        module: "Content",
        interface: "4003",
        data: {
          name: "exchange_rules",
        },
      }).then((res) => {
        console.log(res)
        con.value = res.data.content;
      })
    }
    getCon()

    return {
      form,
      activeIcon,
      inactiveIcon,
      checked,
      show,
      params,
      con,
      onKnow,
      onSubmit,
      getCon,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 88px;
  .price {
    height: 88px;
    background: #e00b12;
    padding-left: 30px;
    font-size: 34px;
    font-weight: 500;
    color: #ffffff;
  }
  .content {
    padding: 40px 30px 0;
    .main {
      padding: 70px 40px 80px;
      position: relative;
      background: #ffffff;
      box-shadow: 0px 8px 16px 0px rgba(223, 207, 207, 0.5);
      border-radius: 20px;
      .mainLine {
        width: 100%;
        height: 9px;
        background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
        border-radius: 20px 20px 0 0;
        position: absolute;
        left: 0;
        top: 0;
      }
      .title {
        font-size: 34px;
        font-weight: 500;
        color: #333333;
      }
      .numberBox {
        margin-top: 68px;
        .numberRight {
          .monIcon {
            font-size: 60px;
            font-weight: 500;
            color: #333333;
          }
          .ipt {
            padding-left: 8px;
            color: #333;
            font-size: 48px;
            border: none;
            background-color: transparent;
          }
          input::-webkit-input-placeholder {
            color: #cccccc;
            font-size: 48px;
          }

          input::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #cccccc;
            font-size: 48px;
          }

          input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: #cccccc;
            font-size: 48px;
          }

          input:-ms-input-placeholder {
            /* Internet Explorer 10-11 */
            color: #cccccc;
            font-size: 48px;
          }
        }
        .all {
          font-size: 28px;
          font-weight: 400;
          color: #e00b12;
          white-space: nowrap;
          border: none;
          background: transparent;
        }
      }
      .useable {
        font-size: 24px;
        font-weight: 400;
        color: #e00b12;
        margin-top: 36px;
      }
      .iptBox {
        margin-top: 60px;
        p {
          font-size: 34px;
          font-weight: 500;
          color: #333333;
          margin-bottom: 40px;
        }
        input {
          background-color: transparent;
          border: none;
          color: #333;
          font-size: 28px;
        }
        input::-webkit-input-placeholder {
          color: #cccccc;
          font-size: 28px;
        }

        input::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #cccccc;
          font-size: 28px;
        }

        input:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #cccccc;
          font-size: 28px;
        }

        input:-ms-input-placeholder {
          /* Internet Explorer 10-11 */
          color: #cccccc;
          font-size: 28px;
        }
      }
      .agreement {
        margin-top: 111px;
        .img-icon {
          width: 30px;
          height: 30px;
        }
        :deep(.van-checkbox__label) {
          font-size: 26px;
          font-weight: 400;
          color: #333333;
        }
        .agree {
          font-size: 26px;
          font-weight: 400;
          color: #e00b12;
          padding-bottom: 6px;
        }
      }
      .exchangeBtn {
        font-size: 32px;
        font-weight: 500;
        color: #ffffff;
        width: 92%;
        height: 88px;
        background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
        box-shadow: 0px 8px 20px 0px rgba(204, 58, 70, 0.4);
        border-radius: 16px;
        margin: 44px auto 0;
        display: block;
        border: none;
      }
    }
  }
  .popupBox {
    width: 620px;
    height: 1011px;
    background: #ffffff;
    border-radius: 16px;
    padding: 50px 30px 60px;
    .popupTitle {
      font-size: 36px;
      font-weight: 500;
      color: #333333;
    }
    .popupCon {
      width: 100%;
      height: 680px;
      background: #ffffff;
      border-radius: 16px;
      font-size: 26px;
      font-weight: 400;
      color: #999999;
      margin-top: 31px;
       overflow-y: auto;
    }
    .popupBtn {
      font-size: 32px;
      font-weight: 400;
      color: #ffffff;
      width: 330px;
      height: 80px;
      background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
      border-radius: 40px;
      border: none;
      margin: 60px auto 0;
      display: block;
    }
  }
}
</style>